<style>
    .box{
        width: 100%;
        margin: 0 auto;
        padding: 20px;
    }
</style>
<template>
    <div>
        <product-title></product-title>
        <div class="box">
            <Row>
                <i-col :xs="20" :sm="20" :md="22" :lg="23">
                    <i-input v-model="formItem.name" style="width: 180px;" placeholder="请输入条款名称"></i-input>
                    <Button @click="search" type="primary" icon="ios-search">搜索</Button>
                </i-col>
                <i-col :xs="4" :sm="4" :md="2" :lg="1">
                    <Button @click="add" style="margin-bottom: 20px;float:right" type="primary">新增</Button>
                </i-col>
            </Row>
            <Row>
                <i-col>
                    <Table :columns="columns" :data="tableData" style="margin-bottom: 20px;"></Table>
                    <Page :total="total" :page="formItem.p" :page-size="formItem.pagesize" show-elevator show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                </i-col>
            </Row>

        </div>
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle';
    import {del_clasuse ,list_clasuse,add_clause} from '../../api/product_v2.js'
    export default {
        data() {
            return {
                total:0,
                formItem:{
                    name:'',
                    p:1,
                    pagesize:10,
                },
                columns:[
                    {
                        type:'index',
                        title:'序号',
                        align:'center'
                    },
                    {
                        title:'条款名称',
                        key:'name',
                        align:'center'
                    },
                    {
                        title:'所属保险',
                        key:'pname',
                        align:'center'
                    },
                    {
                        title:'操作',
                        align:'center',
                        render:(h,params)=>{
                            return h('div',[
                                h('Button',{
                                    props:{
                                        type:'primary',
                                        size:'small'
                                    },
                                    style:{
                                        marginRight:'5px'
                                    },
                                    on:{
                                        click:()=>{
                                            this.$router.push({name:'pro_clause',params:{id:params.row.id}});
                                        }
                                    }
                                },'编辑'),
                                h('Button',{
                                    props:{
                                        type:'error',
                                        size:'small'
                                    },
                                    on:{
                                        click:()=>{
                                            this.$Modal.confirm({
                                                title: '提示',
                                                content: '是否要删除该条记录?',
                                                onOk: () => {
                                                    var _params = {
                                                        id:params.row.id
                                                    }
                                                    this.del(_params);
                                                },
                                            });
                                        }
                                    }
                                },'删除')
                            ])
                        }
                    }
                ],
                tableData:[],
            }
        },
        components:{
            productTitle,
        },
        created(){
//            this.get_list();
        },
        activated(){
            this.get_list();
        },
        methods:{
            search(){
                this.get_list();
            },
            get_list(){
                new Promise((rev,rej)=>{
                    list_clasuse(this.formItem).then(res=>{
                        if(res.data.err==0){
                            this.tableData=[];
                            this.tableData  = res.data.data.list;
                            this.total=res.data.data.total;
                        }else{
                            this.$Message.error(res.data.info);
                        }
                    })
                    rev()
                }).catch(error=>{
                    rej(error)
                })
            },
            del(params){
                new Promise((rev,rej)=>{
                    del_clasuse(params).then(res=>{
                        if(res.data.err==0){
                           this.get_list();
                        }else{
                            this.$Message.error(res.data.info);
                        }
                    })
                    rev()
                }).catch(error=>{
                    rej(error)
                })
            },
            pageChange(value){
                this.p=value;
                this.get_list();
            },
            pageSizeChange(value){
                this.pagesize=value;
                this.get_list();
            },
            add(){
                this.$router.push({name:'pro_addclause'});
            }
        }

    }
</script>


